<template>
    <div class="app-container client-detail">
        <el-form ref="form" :model="form" :inline="true" label-width="120px" v-loading="loading">
            <el-collapse v-model="activeNames">
                <el-collapse-item title="基础信息" name="1">
                    <el-col :span="12">
                        <el-form-item label="来源部门">{{ form.source_department_desc }}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="手机号">{{ form.phone_number }}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="微信昵称">{{ form.wechat_nickname }}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="微信号">{{ form.wechat_id }}</el-form-item>
                    </el-col>
                </el-collapse-item>

                <el-collapse-item title="订单信息" name="2">
                    <el-col :span="12">
                        <el-form-item label="来源店铺">{{  form.source_store_platform }} - {{  form.source_store_desc }}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="订单编号">{{ form.order_number }}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="产品名称">{{ form.product_name }}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="订单日期">{{ form.order_date }}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="收货地址">{{ form.consignees_address }}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="收货人">{{ form.consignees }}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="购买数量">{{ form.buy_qty }}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="购买金额">{{ form.buy_amount }}<font slot="suffix">元</font></el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="预估使用日期">{{ form.estimate_use_date }}</el-form-item>
                    </el-col>
                </el-collapse-item>

                <el-collapse-item title="用户信息" name="3">
                    <el-col :span="12">
                        <el-form-item label="性别">{{ form.sex_desc }}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="年龄">{{ form.age_range_desc }}</el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="痛点问题">{{ form.painText }}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="是否加微">
                            <span v-if="form.is_add_wechat == 1">是</span>
                            <span v-else-if="form.is_add_wechat == 0">否</span>
                            <span v-else></span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="加微日期">{{ form.add_wechat_date }}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="家庭情况">{{ form.family_situation }}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="备注">{{ form.notes }}</el-form-item>
                    </el-col>
                </el-collapse-item>
                
                <el-collapse-item title="裂变数据" name="4">
                    <el-col :span="12">
                        <el-form-item label="老带新">
                            <span v-if="form.is_customer_referrals == 1">是</span>
                            <span v-else-if="form.is_customer_referrals == 0">否</span>
                            <span v-else></span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="裂变状态">
                            <span v-if="form.mutation_status == 1">是</span>
                            <span v-else-if="form.mutation_status == 0">否</span>
                            <span v-else></span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="裂变质量">
                            <span v-if="form.mutation_level == 3">高</span>
                            <span v-else-if="form.mutation_level == 2">中</span>
                            <span v-else-if="form.mutation_level == 1">低</span>
                            <span v-else></span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="活跃等级">
                            <span v-if="form.activity_level == 3">高</span>
                            <span v-else-if="form.activity_level == 2">中</span>
                            <span v-else-if="form.activity_level == 1">低</span>
                            <span v-else></span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="感兴趣产品" prop="age">{{ form.inteProd }}</el-form-item>
                    </el-col>
                </el-collapse-item>
            </el-collapse>
        </el-form>
        <el-row type="flex" justify="center">
            <el-button @click="goBack">返回</el-button>
        </el-row>
    </div>
</template>

<script>
import { custDetail  } from "@/api/shop";

export default {
    data() {
        return {
            activeNames: ['1','2','3','4'],
            loading: false,
            custID:'',
            form:{},
        };
    },
    created() {
        this.custID = this.$route.params.id
        this.getCustDetail()
    },
    methods: {
        getCustDetail(){
            this.loading = true
            custDetail({id: this.custID}).then(res => {
                this.form = res.data
                this.form.painText = this.form.pain_points_question_list.toString()
                this.form.inteProd = this.form.interested_products_list.toString()
                this.loading = false
            });
        },
        goBack(){
            this.$router.go(-1)
        }
    }
};
</script>

<style lang="scss">
    .client-detail {
        .el-collapse{
            border: none;
            .el-collapse-item{margin-bottom: 20px;}
            .el-collapse-item__header{font-size: 16px;font-weight: bold;border-bottom-color: #e6ebf5;margin-bottom: 20px;}
            .el-collapse-item__wrap{border: none;}
        }
        .el-form-item{
            width: 100%;
            .el-form-item__content{width: calc(100% - 120px);}
        }
    }
</style>
